<template>
  <a-modal
    v-model:visible="state.visible"
    title="保存到文案库"
    @cancel="cancel"
    :zIndex="1003"
  >
    <a-form
      ref="formRef"
      style="padding-top: 20px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <a-form-item label="添加至" name="folder_id">
        <a-spin :spinning="state.spinning">
          <a-select
            :options="state.optionList"
            v-model:value="state.formData.folder_id"
            placeholder="请选择文案库"
          >
          </a-select>
        </a-spin>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="cancel">取消</a-button>
      <a-button
        type="primary"
        :loading="state.submitLoading"
        @click="submitHandle"
        >保存</a-button
      >
    </template>
  </a-modal>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";
import { message } from "ant-design-vue";
import request from "@/common/utils/request";
import { useVModel } from "@vueuse/core";
const emit = defineEmits(["onSuccess"]);
const props = defineProps({
  articles: {
    type: Array,
    default: () => [],
  },
  istiqu: {
    type: Boolean,
    default: false
  }
});
const state = reactive({
  visible: false,
  optionList: [],
  formData: {
    folder_id: null, //文案库目录id
  },
  formRules: {
    folder_id: [
      { required: true, message: "请选择要保存的文案库目录", trigger: "blur" },
    ],
  },
  submitLoading: false,
  spinning: false,
});
const showModal = () => {
  state.visible = true;
};
const cancel = () => {
  initData();
};
const initData = () => {
  state.visible = false;
  formRef.value && formRef.value.resetFields();
};
const getList = () => {
  state.spinning = true;
  request
    .get("/work_ai", "/user/shotstack/folder/write/list", {})
    .then((res) => {
      console.log(res.result);
      state.optionList = res.result.data.map((ele) => {
        return {
          value: ele.id,
          label: ele.folder_name,
        };
      });

      if ( state.optionList.length == 1) {
        state.formData.folder_id = state.optionList[0].id
      }
      state.spinning = false;
    })
    .catch((err) => {
      state.spinning = false;
    });
};
getList();

let formRef = ref(null);
const submitHandle = () => {
  formRef.value &&
    formRef.value.validate().then(() => {
      let headlineList = props.articles.map((ele) => {
        return {
          title: ele.title,
          content: ele.content,
          sub_title: "",
        };
      });
      let params = {
        merchant_folder_statck_id: state.formData.folder_id,
        headline: headlineList,
        material_type: "text",
        source:  props.istiqu ? 1 : 4, //数据来源 1-手动添加 2-抖音链接 3-素材库 4-AI生成  
      };
      state.submitLoading = true;
      request
        .post("/work_ai", "/user/shotstack/write/add", params)
        .then((res) => {
          if (res && res.result) {
            message.success("保存成功");
            emit("onSuccess");
            initData();
          }
          state.submitLoading = false;
        })
        .catch((error) => {
          state.submitLoading = false;
        });
    });
};
defineExpose({
  showModal,
  cancel,
});
</script>

<style lang="scss" scoped></style>
